<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>图片提示</title>
    <!--   引入jQuery -->
    <script src="../../js/common/js/jquery-3.4.1.js"></script>
    <style type="text/css">
        body {
            margin: 0;
            padding: 40px;
            background: #fff;
            font: 80% Arial, Helvetica, sans-serif;
            color: #555;
            line-height: 180%;
        }

        img {
            border: none;
            width: 300px;
            height: 300px;
        }
        li img
        {
        	width: 100px;
        	height: 100px;
        }

        ul, li {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
            float: left;
            display: inline;
            margin-right: 10px;
            border: 1px solid #AAAAAA;
        }

        /* tooltip */
        #tooltip {
            position: absolute;
            border: 1px solid #ccc;
            background: #333;
            padding: 2px;
            display: none;
            color: #fff;
        }
    </style>
    <script type="text/javascript">
       $(function(){
       	var x=1;
       	var y=1;
       	$(".tooltip").mouseover(function(a){
       		$("body").append("<div id='bigimg'><img src='"+this.href+"'></div>")
       		$("#bigimg").css({
       			"top":(a.pageY-y)+'px',
       			"left":(a.pageX+x)+'px',
       			
       		});
       	}).mouseout(function(){
       		$("#bigimg").remove();
       	}).mousemove(function(a){
       		$("#bigimg").css({
       			
       			"top":(a.pageY-y)+'px',
       			"left":(a.pageX+x)+'px',
       			"position":"absolute",
       		});
       	})
       })
    </script>
    <!--this.myTitle = this.title;
    this.title = "";-->
</head>
<body>
    <ul>
        <li>
            <a href="../Images/bxgz_big.jpeg" class="tooltip" title="白雪公主">
                <img src="../Images/bxgz.jpg" alt="白雪公主" />
            </a>
        </li>
        <li>
            <a href="../Images/sj_big.jpeg" class="tooltip" title="妖精">
                <img src="../Images/sj.jpg" alt="妖精" />
            </a>
        </li>
        <li>
            <a href="../Images/kn_big.jpeg" class="tooltip" title="柯南">
                <img src="../Images/kn.jpg" alt="柯南" />
            </a>
        </li>
        <li>
            <a href="../Images/pdx_big.jpeg" class="tooltip" title="蜡笔小新">
                <img src="../Images/pdx.png" alt="蜡笔小新" />
            </a>
        </li>
    </ul>
    
</body>
</html>
